<template>
  <div class="SongItem">
    <div class="top">
      <div class="mc">
        <div class="bg" :style="{ backgroundImage: `url(${Songlist.coverImgUrl})` }"></div>
      </div>
      <div class="top_top">
        <div class="backsong">
          <span class="jiantou iconfont icon-fanhui" @click="back"></span>
          <span>歌单</span>
        </div>
        <div class="top-right">
          <router-link tag="div" :to='{
            path:"/search",
            name:"search",
          }' class="top_search iconfont icon-sousuo-copy">
          </router-link>
          <!-- <div class="top_porit">。。。</div> -->
        </div>
      </div>
      <div class="contre">
        <div class="top_contre_left">
          <div class="img">
            <div class="pic">
              <img :src="item.picUrl" alt />
              <div class="num">
                <i class="iconfont icon-erji"></i>
                {{item.playCount|formatNum}}
              </div>
            </div>
          </div>
        </div>
        <div class="top_contre_right">
          <div class="title">{{item.name}}</div>
          <div class="renmin" v-if="Songlist.creator">
            <span class="toux">
              <img :src="Songlist.creator.avatarUrl" alt />
            </span>
            <span class="renminame">{{Songlist.creator.nickname}}</span>
          </div>
          <p>{{Songlist.description}}</p>
        </div>
      </div>

      <div class="collect">
        <div>
          <i class="shoucan" :style="{backgroundImage:`url(${shoucan})`}"></i>
          {{Songlist.subscribedCount}}
        </div>
        <span class="active"></span>
        <div>
          <!-- path:'/talk', -->
            <!-- name:'talk', -->
          <router-link
            tag="i"
            :to='"/talk/"+item.id'
            class="pinglun"
            :style="{backgroundImage:`url(${pinglun})`}"
          ></router-link>
          {{Songlist.commentCount}}
        </div>
        <span class="active"></span>
        <div>
          <i class="shoucan" :style="{backgroundImage:`url(${fenxiang})`}"></i>
          {{Songlist.shareCount}}
        </div>
      </div>
    </div>

    <div class="sonlist">
      <ul class="hotul">
        <MusicListItem
          @play="$emit('play',$event)"
          :list="list"
          v-for="(list,index) in songitemlist"
          :key="list.id"
          :index="index"
        >
          <div class="listnum" :class="['num',{red:index<3}]">{{index+1|addZero}}</div>
        </MusicListItem>
      </ul>
    </div>
  </div>
</template>

<script>
import MusicListItem from "@/components/MusicListItem";
export default {
  name: "SongItem",
  // props: ["item"],

  data() {
    return {
      songitemlist: [],
      item:null,
      playList: [],
      Songlist: [],
      shoucan: require("@/assets/images/shoucan.png"),
      pinglun: require("@/assets/images/pinglun.png"),
      fenxiang: require("@/assets/images/fenxiang.png"),
      // limit: 20,
      // id:this.id
    };
  },

  created() {
   
    this.item=JSON.parse(this.$route.query.item)
     console.log(this.item);
  },
  filters: {
    addZero(val) {
      // console.log(val);
      return val < 10 ? "0" + val : val;
    },
    formatNum(value) {//判定数字是否大于w
      return (value / 10000).toFixed(1) + "万";
    },
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    loadermore() {
      // let num = this.songitemlist.length + this.limit;
      this.songitemlist = this.Songlist.slice(0);
    },
  },

  mounted() {
    this.$http
      .get("/playlist/detail", {
        params: {
          id: this.item.id,
        },
      })
      .then((dlist) => {
        console.log("数据", dlist);
        this.Songlist = dlist.data.playlist;
        console.log("22222222", this.Songlist);
        this.playList = dlist.data.playlist.tracks;
        this.Hotlist = this.playList.map((d, index) => {
          let data = d;
          data.song = {
            artists: d.ar,
            privilege: {
              playMaxbr: dlist.data.playlist.tracks[index].playMaxbr,
            },
          };
          return data;
        });

        this.songitemlist = this.Hotlist.splice(0);
        console.log("111111111", this.songitemlist);
      });
  },

  components: {
    MusicListItem,
  },
};
</script>

<style lang="less" scoped>
.SongItem{
  margin-bottom: 70px;
}
.top {
  width: 100%;
  height: 21rem;
  // border-radius: 0px 0px 30px 30px;
  // background-color: rgba(255, 255, 255, 0.2);
  position: relative;
  .mc {
    width: 100%;
    position: absolute;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.4);
    top: 0px;
    height: 21rem;
  }
  .bg {
    width: 100%;
    position: absolute;
    overflow: hidden;
    filter: blur(18px);
    top: 0px;
    height: 21rem;
  }

  .top_top {
    height: 3.6rem;
    width: 100%;
    line-height: 3.6rem;
    position: absolute;

    justify-content: space-between;
    .backsong {
      font-size: 1.4rem;
      color: #ffff;
      font-weight: 500;
      // flex: 0.7;
      float: left;

      .jiantou {
        width: 3.6rem;
        height: 3.6rem;
        margin-right: 0.5rem;
        display: inline-block;
        text-align: center;
        //   background-color: aqua;
      }
    }
    .top-right {
      // flex: 1;
      float: right;
      color: #ffff;
      
      text-align: center;
      .top_search {
        float: left;
        font-size: 25px;
        width: 3.6rem;
        height: 3.6rem;
        margin-right: 10px;
      }
      // .top_porit {
      //   float: left;
      //   width: 3.6rem;
      //   height: 3.6rem;
      //   margin-left: 0.6rem;
      //   margin-right: 0.6rem;
      //   font-size: 1.4rem;
      // }
    }
  }
  .contre {
    display: flex;
    position: absolute;
    margin-top: 1.3rem;
    top: 3.5rem;
    .top_contre_left {
      // flex: 1;
      // background-color: aqua;
      width: 12.9rem;
      height: 12.9rem;
      // height: 23vh;
      margin-left: 1.3rem;

      position: relative;
      .img {
        &::after {
          content: "";
          background-color: rgba(0, 0, 0, 0.3);
          width: 9.2rem;
          height: 1.3rem;
          position: absolute;
          left: 1.6rem;
          // right: 0px;
          top: 0.4rem;
          // bottom: 0px;
          margin: auto;
          text-align: center;
          // z-index: -1;
          border-radius: 10rem;
        }
        .pic {
          width: 11.3rem;
          height: 11.3rem;
          // background-color: grey;
          position: absolute;
          left: 0.6rem;
          // right: 0px;
          top: 0px;
          bottom: 0px;
          margin: auto;
          text-align: center;

          z-index: 2;
          img {
            width: 11.3rem;
            height: 11.3rem;
            border-radius: 15px;
          }
        }
        .num {
          position: absolute;
          right: 1rem;
          top: 0.5rem;
          color: #ffff;
          font-size: 0.8rem;
          width: 4rem;
          background-color: rgba(0, 0, 0, 0.4);
          border-radius: 15px;
          }
      }
    }
    .top_contre_right {
      flex: 1;
      color: azure;
      // background-color: rgb(9, 34, 34);
      // width: 15vh;
      // height: 23vh;
      padding: 0px 0px 0px 2rem;
      .title {
        font-size: 1.6rem;
        margin-top: 1rem;
        width: 18.3rem;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 这里是超出几行省略 */
        overflow: hidden;
        color: rgba(255, 255, 255, 0.9);
      }
      .renmin {
        margin-top: 1.3rem;
        display: flex;
        align-items: center;
        // line-height: 4vh;
        .toux {
          width: 3rem;
          // font-size: 14px;
          height: 3rem;
          display: inline-block;
          // background-color: antiquewhite;

          img {
            width: 3rem;
            border-radius: 50%;
            height: 3rem;
          }
        }

        .renminame {
          // line-height: 4vh;
          font-size: 1.1rem;
          display: inline-block;
          margin-left: 1rem;
          color: rgba(255, 255, 255, 0.8);
        }
      }
      p {
        font-size: 0.86rem;
        margin-top: 1rem;
        width: 18.3rem;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1; /* 这里是超出几行省略 */
        overflow: hidden;
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
  .collect {
    position: absolute;
    // margin-top: 1rem;
    width: 25rem;
    height: 3.8rem;
    left: 0px;
    right: 0px;
    bottom: -2rem;
    border: 1px solid #f6f6f6;
    margin: auto;
    background-color: rgb(255, 255, 255);
    border-radius: 3rem;
    display: flex;
    align-items: center;
    .active {
      width: 1px;
      height: 2rem;
      background-color: rgba(0, 0, 0, 0.1);
    }
    div {
      flex: 1;

      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      line-height: 3.8rem;
      font-size: 1rem;

      i {
        // flex: 1;
        display: inline-block;
        width: 1.25rem;
        height: 1.25rem;
        // background-color: red;
        margin-right: 0.5rem;
        background-size: 100%;
        // line-height: 3.8rem;
      }
    }
  }
}
.sonlist {
  margin-top: 4rem;
}
.list .listnum {
  float: left;
  width: 30px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 15px;
  padding-right: 10px;
}
</style>